<template>
    <div class="service">
        <div class="mt-6">
           <div v-html="bussTex" class="ql-editor"></div>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, watch, reactive, computed, ref, toRefs, watchEffect} from "vue";
    import {useRoute} from "vue-router";
    import {PromoteService} from "@/services/PromoteService";
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    export default defineComponent({
        name: "service",
        setup() {
            const state = reactive({
                bussTex:''
            });
            const route = useRoute();
            const getContent = async () => {
                let type = Number(route.query.type) || 1;
                let key = ''
                if (type == 1) {
                    key = 'use_terms'
                }
                if (type == 2) {
                    key = 'privacy_policy'
                }
                if (type == 3) {
                    key = 'help_question'
                }
                if (type == 4) {
                    key = 'about_us'
                }
                let result = await PromoteService.getContent({
                    key: key
                });
                if (result.data.code == 0) {
                    if (result.data.data.length > 0) {
                        state.bussTex =  result.data.data[0].value
                    }
                }
            };
            watch(() =>route.query.type,(newValue)=> {
               if(newValue){
                   getContent()
               }
            },{ immediate: true })
            return {
                ...toRefs(state),
            }
        },
    });
</script>

<style scoped lang="scss">
    .service {
        color: #fff;
        font-size: 16px;
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    pre {
        box-sizing: border-box;
        word-break: break-all;
        white-space: pre-line;
        font-size: 16px;
        color: #fff;
        padding: 0 14px;
        line-height: 26px;
    }
</style>
